<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<template>
    <div class='vip-root'>
        <NavigationBar></NavigationBar>

        <div class="vip">
            <div id="box">
                <div id="box-left">
                    <img src="/imgs/vip/logo.png" id="logo">
                    <span id="vip-course">课程中心</span>
                    <span id="vip-belief">只成就用心筑梦的人</span>
                </div>
                <div id="box-right">
                    <input type="text" id='vip-input' placeholder="搜索感兴趣的课程">
                    <img src="/imgs/vip/search.png" class="vip-search">
                </div>
            </div>
            <hr>

            <div
                v-for="(c,item) in classify"
                :key="item"
                class="classify"
            >
                <b>{{c.title}}</b>
                <span class="classifyAll">全部</span>
                <div class="all-course">
                    <span 
                        v-for="(course,index) in c.course"
                        :key="index"
                        class="course"
                    >{{course}}</span>
                </div>
            </div>
        </div>


        <div id="vip-main">
            <div class="vip allVedio">
                <router-link 
                    v-for="item in 10"
                    :key="item"
                    to='/vediodetail'
                    class="each-vedio"
                >
                    <img src="/imgs/vip/math02.png" class="vip-img">
                    <div class="vedio-bottom">
                        <p class="vip-p">标题关键词选取与组合</p>
                        <div class="vip-time">
                            <span style="color:black;">22分57秒</span>
                            <span class="vip-person">2058人已学</span>
                        </div>
                    </div>
                </router-link>
                <div class="each-vedio"></div>
                <div class="each-vedio"></div>
            </div>

            <!-- 分页 -->
            <el-pagination 
                    :page-size="12" 
                    background
                    layout="prev, pager, next, jumper" 
                    :total="100"
                    class="page"
                >
            </el-pagination>
        </div>







        <Footer/>
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar.vue'
import Footer from '@/components/Footer.vue'
export default {
    components:{
        NavigationBar,
        Footer,
    },
    data () {
        return {
            classify:[
                {
                    title:'方向：', 
                    course:[ '电商运营','视觉设计','跨境电商' ],
                },
                {
                    title:'分类：', 
                    course:[ '平台介绍','天猫平台','淘宝平台','宝贝管理','店铺装修','卖家中心','运营初级场景课','店铺优化','定位思路','宝贝优化','营销工具','自然流量','付费推广','客户管理','营销活动','运营中级场景课','定位','SEO','直通车','钻展','淘宝客','内容营销','手机淘宝','活动  会员','爆款','运营思路','行业介绍','软件基础','图层操作','色彩调整','Banner设计','首页设计','详情设计','设计原理','设计思路' ],
                },
                {
                    title:'难度：', 
                    course:[ '初级入门','中级进阶','高级突破' ],
                },
            ],
        };
    },
}

</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
.vip-root /deep/ #root{
    background-color: #020F1C;
    color: white;
}
.vip{
    width: 1200px;
    margin: 0 auto;
}
#box{
    height: 89px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
hr{
    border: 1px solid  #E8E9ED;
    margin: 0;
}
#box-left{
    display: flex;
    align-items: center;
}
#logo{
    width: 41px;
    height: 41px;
    margin-right: 10px;
}
#vip-course{
    color: #020F1C;
    font-size: 26px;
    font-weight: bold;
}
#vip-belief{
    letter-spacing: 5px;
    margin-left: 14px;
}
#vip-input{
    width: 523px;
    height: 38px;
    padding-left: 20px;
    background:rgba(243,245,246,1);
    border: none;
}
.vip-search{
    position: relative;
    left: -36px;
    top: 5px;
}
.classify{
    border-bottom: 1px solid #E8E9ED;
    padding: 27px 0px;
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}
.classify:last-child{
    border-bottom:none;
}
.classifyAll{
    height: 34px;
    padding: 8px 13px;
    color:  #02B2FB;
    background:rgba(213,243,255,1);
    transform: translate(0,-5px);
}
.all-course{
    width: 88%;
    transform: translate(0,-8px);
}
.course{
    display: inline-block;
    width: 11%;
    padding: 10px 0px;
}
#vip-main{
    width: 100%;
    background-color: #f4f4f4;
}
.allVedio{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 70px;
}
.each-vedio{
    width: 24%;
    margin: 10px 0;
    text-decoration: none;
    transition: all 0.5s;
}
.each-vedio:hover{
    box-shadow: 0 0 8px 0 gray;
}
.each-vedio:nth-last-child(2):hover{
    box-shadow:0 0 0 0 transparent;
}
.each-vedio:last-child:hover{
    box-shadow:0 0 0 0 transparent;
}
.vip-img{
    width: 100%;
    height: 194px;
}
.vedio-bottom{
    padding: 19px;
    background-color: white;
    position: relative;
    top: -4px;
}
.vip-p{
    font-size: 18px;
    line-height: 36px;
    color:rgba(2,15,28,1);
}
.vip-time{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 15px;
}
.vip-person{
    color: #AAAAAA;
}
/* 分页 */
.page{
    padding: 50px;
    text-align: center;
    /* border: 1px solid red; */
}
</style>